<template>
  <div class="app-container">
    <!-- <div class="filter-container">

      <div class="filter-item">
        <el-input v-model="sortRule.searchContent" placeholder="请输入">
          <el-select v-model="sortRule.searchBy" clearable slot="prepend" placeholder="搜索选项" style="width: 120px">
            <el-option v-for="option in searchOptions" :key="option.key" :label="option.display" :value="option.key"></el-option>
          </el-select>
        </el-input>
      </div>

      <el-select v-model="sortRule.runningState" clearable placeholder="运行状态" class="filter-item">
        <el-option v-for="state in runningStates" :key="state.key" :label="state.display" :value="state.key">
          {{ state.display }}
        </el-option>
      </el-select>

      <el-select v-model="sortRule.updateTime" placeholder="时间排序方法" class="filter-item">
        <el-option label="降序" value="deascend"></el-option>
        <el-option label="升序" value="ascend"></el-option>
      </el-select>

      <el-button type="primary" @click="handleSearch" class="filter-item">
        <i class="el-icon-search"></i>
        Search
      </el-button>

      <el-button v-show="isSorted" type="danger" @click="handleClearSort" class="filter-item">
        Clear
      </el-button>
    </div> -->

    <el-table
      v-loading="listLoading"
      :data="filterByPage"
      element-loading-text="Loading..."
      highlight-current-row
      fit
    >
      <el-table-column prop="deviceId" label="设备号">
        <template slot-scope="{row}">
          <router-link
            :to="{path:'/devices/' + row.deviceId, query:{ id: row.deviceId }}"
            class="text-highlight"
          >
            {{ row.deviceId }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="设备名"></el-table-column>
      <el-table-column label="运行状态">
        <template slot-scope="{row}">
          <div :class="row.state=='running' ? 'text-running' : 'text-stopped'">
            {{ row.state === "running" ? "运行中" : "停止" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="注册时间">
        <template slot-scope="{row}">
          <!-- {{ new Date(row.regTime).toLocaleString() }} -->
          {{ row.regTime }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      align="center"
      :hide-on-single-page="true"
      :total="list.length"
      :current-page="page"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="handlePageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getDevices } from '@/api/devices'

const runningStates = [
  { key: "running", display: "运行中" },
  { key: "stopped", display: "停止" }
]

const searchOptions = [
  { key: "id", display: "设备号" },
  { key: "name", display: "设备名" }
]

export default {
  name: "DevicePage",

  data() {
    return {
      list: null,
      sortList: null,
      listOfThisPage: null,
      listLoading: true,
      page: 1,
      limit: 20,
      isSorted: false,
      sortRule: {
        runningState: null,
        searchBy: null,
        searchContent: null,
        updateTime: "ascend"
      },
      runningStates,
      searchOptions
    }
  },

  computed: {
    filterByPage: function() {
      if (this.page * this.limit - 1 < this.sortList.length) {
        return this.sortList.slice((this.page - 1) * this.limit, this.page * this.limit - 1)
      } else {
        return this.sortList.slice((this.page - 1) * this.limit)
      }
    }
  },

  created() {
    this.fetchData()
  },

  methods: {
    fetchData() {
      this.listLoading = true
      getDevices().then(response => {
        this.list = response.data.items
        this.sortList = this.list.slice(0)
        this.listLoading = false
      })
    },
    handlePageChange(page) {
    },
    handleSearch() {
      this.page = 1
      this.isSorted = true
    },
    handleClearSort() {
      this.page = 1
      this.sortList = this.list
      this.isSorted = false
    },
  }
}
</script>

<style lang="scss" scoped>
.text-highlight {
  text-decoration: underline;
  &:link,
  &:visited {
    color: lightseagreen;
  }
}

.text {
  &-stopped {
    background-color: lightcoral;
    color: white;
    border-radius: 2px;
    display: inline;
    padding: 0px 10px 0 10px;
  }

  &-running {
    background-color: lightgreen;
    color: white;
    border-radius: 2px;
    display: inline;
    padding: 0px 10px 0 10px;
  }
}

.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}
</style>
